<template>
  <div class="page">
    <div class="page-content">
      <!--
        background => 是否为分页按钮添加背景色 { boolean } {默认值: false} {可选值: true，false}
        @size-change => pageSize 改变时会触发 {回调参数: 每条页数}
        @current-change => currentPage 改变时会触发 {回调参数: 当前页}
        :current-page => 当前页数，支持 .sync 修饰符 { number } {默认值: 1}
        :page-sizes => 每页显示个数选择器的选项设置 { number[] } {默认值: [10, 20, 30, 40, 50, 100]}
        :page-size => 每页显示条目个数，支持 .sync 修饰符 { number } {默认值: 10}
        layout => 组件布局，子组件名用逗号分隔 { String } {默认值: 'prev, pager, next, jumper, ->, total'}
        small => 是否使用小型分页样式
        :total => 总条目数 { number } {默认值： 空}
       -->
      <el-pagination
        :small="small"
        background
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        :page-sizes="pageSizes"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PagInation',
  props: {
    // 每条页数
    pageSize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 100],
    },
    // 总条数目
    total: {
      type: Number,
      required: true,
      default: () => {
        return 0;
      },
    },
    // 当前页
    currentPage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 展示部位
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    small: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    /**
     * @file pageSize改变时触发
     *
     * @return 每条页数
     */
    handlePageSizeChange(val) {
      this.$emit('handleSizeChange', val);
    },

    /**
     * @file currentPage 改变时触发
     *
     * @return 当前页
     */
    handlePageCurrentChange(val) {
      this.$emit('handleCurrentChange', val);
    },
  },
};
</script>
<style lang="scss" rel="stylesheet/scss">
.page-content {
  display: flex;
  justify-content: flex-end;
}
</style>
